<template>
  <div class="patient-reported">
    <transition>
      <LeftMenu v-show="show" />
    </transition>
    <RightContent @callback="v => (show = v)" />
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
import LeftMenu from './components/LeftMenu'
import RightContent from './components/RightContent'
export default {
  data() {
    return {
      show: true,
    }
  },
  components: { LeftMenu, RightContent },
  mounted() {
    this.findSubjectInfo()
    this.getCheckTypeConfigList()
   
  },
  methods: {
    ...mapActions('subjectInformation', ['getSubjectInfo']),
    ...mapActions('eCRFDesign', ['qryCheckTypeConfigList']),
    ...mapMutations({
      setSubjectInfo: 'treatment/setSubjectInfo',
      setAudits: 'treatment/setAudits',
    }),
    // 查询核查类型列表
    getCheckTypeConfigList() {
      const params = {
        projectId: localStorage.getItem('sys-project-id'),
      }
      this.qryCheckTypeConfigList({ params }).then(res => {
        const { data, code } = res
        if (code === 200) {
          sessionStorage.setItem('CHECKSELECT', JSON.stringify(data))
          const checkSelect = JSON.parse(sessionStorage.getItem('CHECKSELECT'))
          this.setAudits(checkSelect.filter(item => item.status === 1))
        }
      })
    },
    async findSubjectInfo() {
      const params = {
        id: this.$route.query.id,
        projectId: localStorage.getItem('sys-project-id'),
      }
      const res = await this.getSubjectInfo({ params })
      sessionStorage.setItem('SUBJECT_INFO', JSON.stringify(res.data))
      const subjectInfo = JSON.parse(sessionStorage.getItem('SUBJECT_INFO'))
      this.setSubjectInfo(subjectInfo)
    },
  },
}
</script>
<style>
.patient-reported-right {
  display: flex;
  flex-flow: column nowrap;

  .header {
    flex: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.8rem 0 1rem;
    border-bottom: 1px #ebeef5 solid;

    div {
      background-repeat: no-repeat;
    }

    .left {
      width: 50rem;
      text-align: left;
      font-size: 1rem;
      font-weight: 700;
      padding-left: 2.2rem;
      background-size: 0.85rem 0.7rem;
      background-position: 0.1rem 0.4rem;
    }

    .subtitle {
      font-size: 0.875rem;
      margin-left: 0.625rem;
      color: #f56c6c;
    }
  }

  .right {
    width: 1rem;
    height: 2rem;
    background-size: 1rem 0.85rem;
    background-position: 0rem 0.5rem;
    background-image: url('./../../assets/img/back.png');
    cursor: pointer;
  }
}

.form {
  flex: 800;
}

.copyright {
  flex: 24;
  font-size: 0.75rem;
  color: #909399;
}
</style>

<style lang="scss">
.patient-reported {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: row nowrap;

  & > div {
    box-sizing: border-box;

    &:first-child {
      flex: 270;
    }

    &:last-child {
      flex: 1650;
    }
  }

  // *::-webkit-scrollbar {
  //   width: 0 !important;
  // }

  // * {
  //   -ms-overflow-style: none;
  // }

  // * {
  //   overflow: -moz-scrollbars-none;
  // }

  .v-enter-active {
    animation: move 0.3s;
  }

  .v-leave-active {
    animation: move 0.3s reverse;
  }

  @keyframes move {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translate(0);
    }
  }
}
</style>
